<template>
    <div class="page">
        <van-nav-bar
            title="订单详情"
            left-arrow
            @click-left="onClickLeft"/>
        <!-- <div class="null"></div> -->
        <van-tabs @click="changetab" v-model="active" swipeable>
            <van-tab title="全部">
                <!-- 全部订单 -->
                <div  class="components">
                    <div class="content" v-for="(item,index) in dataListAll" :key="item.id">
                        <daifukuan v-if="item.status==1" :item="item" :index='index' arrName='dataListAll' @toparent="addorder"></daifukuan>
                        <daifahuo v-if="item.status==2" :item="item"></daifahuo>
                        <daifahuo v-if="item.distribution_status==0" :item="item"></daifahuo>
                        <daishouhuo v-if="item.distribution_status==1" :item="item"></daishouhuo>
                        <shouhou v-if="item.status==6" :item="item"></shouhou>
                    </div>
                    <!-- 评价的商品 -->
                    <div class="content" v-for="item in daipingjiaData" :key="item.id">
                        <daipingjia :item="item"></daipingjia>
                    </div>
                </div>
            </van-tab>
            <van-tab title="待付款">
                <!-- 代付款订单 -->
                <div  class="components">
                    <div class="content" v-for="(item,index) in daifukuanData" :key="item.id" >
                        <daifukuan :item="item" :index='index' arrName='daifukuanData'></daifukuan>
                    </div>
                    <div class="pay" v-if="daifukuanData!=''"><span class="pay-button">合并支付</span></div>
                </div>
            </van-tab>
            <van-tab title="待发货">
                <!-- 待发货订单 -->
                <div class="components">
                    <div class="content" v-for="item in daifahuoData" :key="item.id">
                        <daifahuo :item="item"></daifahuo>
                    </div>
                </div>
            </van-tab>
            <van-tab title="待收货">
                <!-- 待收货订单 -->
                <div  class="components">
                    <div class="content" v-for="item in daishouhuo" :key="item.id">
                        <daishouhuo :item="item"></daishouhuo>
                    </div>
                </div>
            </van-tab>
            <van-tab title="待评价">
                <!-- 待收货订单 -->
                <div class="components">
                    <div class="content" v-for="(item,index) in daipingjiaData" :key="item.id">
                        <daipingjia :item="item" :index="index"></daipingjia>
                    </div>
                </div>
            </van-tab>
            <van-tab title="售后/退款">
                <!-- 退款 -->
                <div class="components">
                    <div class="content" v-for="item in tuikuanData" :key="item.id">
                        <shouhou :item="item"></shouhou>
                    </div>
                </div>
            </van-tab>
        </van-tabs>        
    </div>
</template>
<script>
import daifukuan from "./daifukuan"
import daifahuo from "./daifahuo"
import daishouhuo from "./daishouhuo"
import shouhou from "./shouhou"
import daipingjia from "./daipingjia"

export default {
    data(){
        return{
            active:0,
            dataListAll:[],//全部订单
            daifukuanData:[],//代付款订单
            daifahuoData:[],//待发货
            orderArr:[],//全部选中的订单
            daishouhuo:[],//已发货的订单
            daipingjiaData:[],//待评价
            tuikuanData:[]//退款
        }
    },
    components:{daifukuan,shouhou,daifahuo,daishouhuo,daipingjia},
    methods:{
        changetab(e){
            localStorage.setItem("tab",e);
        },
        // 添加订单数组
        addorder(e){
            if(e.is_add){
                this.orderArr.push(e.orderid)
            }else{
                var index=this.orderArr.indexOf(e.orderid)
                this.orderArr.splice(index,1)
            }
        },
        // 返回前一页
        onClickLeft(){
            this.$router.go(-1)
        },
        all(){
            this.request({
                url:"?controller=theapi&action=order"
            }).then(res=>{
                var data=res.data.data
                for(var i in data){
                    data[i].checked=false
                }
                this.dataListAll=data
            })
        },
        // 请求待付款
        daifukuan(){
            this.request({
                url:"?controller=theapi&action=order",
                params:{
                    status:1
                }
            }).then(res=>{
                var data=res.data.data
                this.daifukuanData=data
            })
        },
        // 请求待发货
        daifahuo(){
            this.request({
                url:"?controller=theapi&action=order",
                params:{
                    distribution_status:0
                }
            }).then(res=>{
                console.log(res,'已发货')
                var data=res.data.data
                this.daifahuoData=data
            })
        },
        // 请求已发货
        yifahuo(){
            this.request({
                url:"?controller=theapi&action=order",
                params:{
                    status:2,
                    distribution_status:1
                }
            }).then(res=>{
                console.log(res,'待收货')
                var data=res.data.data
                this.daishouhuo=data
            })
        },
        // 请求待评价
        daipingjia(){
            this.request({
                url:"?controller=theapi&action=evaluation",
                params:{
                    status:0
                }
            }).then(res=>{
                console.log(res,'待评价')
                this.daipingjiaData=res.data.data
            })
        },
        // 请求退款订单
        tuikuan(){
            this.request({
                url:"?controller=theapi&action=order",
                params:{
                    status:6
                }
            }).then(res=>{
                this.tuikuanData=res.data.data
            })
        },
    },

    created(){
        var index=this.$route.params.index
        if(index){
            this.active=index
            localStorage.setItem("tab",this.tab);
        }else{
            this.active=localStorage.getItem("tab")
        }
        this.all()
        this.daifukuan()
        this.daifahuo()
        this.yifahuo()
        this.daipingjia()
        this.tuikuan()
        this.all()
    }
}
</script>
<style scoped>
    .null{height: 0.2rem;background: #F5F6F7;}
    .tabs{display: flex;height: 1rem;line-height: 1rem;border-bottom: 1px solid #e6e6e6}
    .tab-item{flex: 1;text-align: center;font-size: 0.3rem}
    .tab-itemactive{border-bottom:1px solid #f57397}
    .pay{height: 1rem;background: white;text-align: right}
    .pay-button{display: inline-block;line-height: 1rem;width: 2.68rem;background: #F52E67;color: white;font-size: 0.28rem;text-align: center;}  
</style>


